{% extends 'checkstand/base/index.html' %}

{% block nav_home %}class="active"{% endblock %}

{% block html_content %}
    <legend><h3>收银台</h3></legend>
    <div class="row placeholders">
        <div class="table-responsive">
            {% ifequal number 0 %}
                <h1>暂时还没有顾客点餐</h1>
            {% else %}
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>订单号</th>
                        <th>桌号</th>
                        <th>下单时间</th>
                        <th>总价</th>
                        <th>收款</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for order in orders %}
                        <tr id="order{{ order.id }}">
                            <td>{{ order.id }}</td>
                            <td>{{ order.desk_id }}</td>
                            <td>{{ order.time|date:"Y-m-d H:i:s" }}</td>
                            <td>{{ order.totle_price }}</td>
                            <td>
                                <button type="button"
                                        class="button button-primary button-small"
                                        data-toggle="modal"
                                        data-target="#myModal"
                                        onclick="showBill({{ order.id }},{{ order.desk_id }},'{{ order.time }}',{{ order.totle_price }})">
                                    现金支付
                                </button>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            {% endifequal %}

        </div>
    </div>
{% endblock %}

{% block modal %}
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document" style="text-align: center">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-label="Close"><span
                            aria-hidden="true">&times;</span>
                    </button>
                    <h3 class="modal-title" id="myModalLabel">支付账单</h3>
                    <p id="title-order-id" class="pull-right" style="padding-right: 50px;"></p>
                    <br>
                </div>
                <div class="modal-body" style="margin-top: -21px">
                    <table class="table">
                        <thead>
                        <th>菜名</th>
                        <th>份数</th>
                        <th>单价</th>
                        <th>总价</th>
                        </thead>
                        <tbody id="detail-list">
                        </tbody>
                    </table>
                    <div style="padding: 10px 20px 0px 30px">
                        <p id="desk-id" class="pull-left"></p>
                        <p id="order-time" class="pull-right"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="button-group">
                        <button type="button"
                                class="button button-primary button-small"
                                onclick="payBill()"
                        >
                            支付
                        </button>
                        <button type="button"
                                class="button button-small"
                                data-dismiss="modal">
                            关闭
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js_content %}
    <script>

        function showBill(orderId, deskId, time, totlePrice) {
            $("#title-order-id").html("订单号：" + orderId)
            $("#desk-id").html("桌号：" + deskId + "号")
            $("#order-time").html("下单时间：" + time)
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "{% url 'checkstand:show_order_detal' %}",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {orderId: orderId},
                success: function (data) {
                    if (data.state == 'success') {
                        var bills = JSON.parse(data.bills)
                        var html = ''
                        for (var key in bills) {
                            var bill = bills[key]
                            html += "<tr>" +
                                "<td>" + bill.menu_name + "</td>" +
                                "<td>" + bill.order_num + "</td>" +
                                "<td>" + bill.menu_price + "</td>" +
                                "<td>" + bill.totle_price + "</td>" +
                                "</tr>"
                        }
                        html += "<tr>" +
                            "<td>总价</td>" +
                            "<td></td>" +
                            "<td></td>" +
                            "<td>" + totlePrice + "</td>" +
                            "</tr>"
                        $("#detail-list").html(html)
                    }
                },

            })
        }

        function payBill() {
            orderId = $("#title-order-id").html()
            $.ajax({
                headers: {"X-CSRFToken": '{{ csrf_token }}'},
                url: "{% url 'checkstand:pay_bill' %}",
                type: 'POST',
                tradition: true,
                dataType: 'json',
                data: {orderId: orderId},
                success: function (data) {
                    if (data.state == 'success') {
                        var id = data.order_id
                        $.scojs_message(id + "号订单支付成功", $.scojs_message.TYPE_OK);
                        $('#myModal').modal('hide');
                        $('#order' + id).hide();
                    }
                },

            })

        }
    </script>
{% endblock %}


